// var bigImgsSrc = ['data.img']

var $$ = jQuery.noConflict() ;
class Magnifier {
    constructor(ele) {
        this.ele = $$(ele);
        this.oLeft = this.ele.find('.left');
        this.oLeft1 = this.ele.find('.left1');
        // this.oLeftImg = this.ele.find('.left1 img');
        this.oCover = this.ele.find('.cover');
        this.oRight = this.ele.find('.right');
        this.oRightImg = this.ele.find('.right img');
 
        this.offsetX = this.oLeft.offset().left;
        this.offsetY = this.oLeft.offset().top;
        this.r = this.oCover.outerWidth() / 2;
        this.maxX = this.oLeft1.innerWidth() - this.oCover.outerWidth();
        this.maxY = this.oLeft1.innerHeight() - this.oCover.outerHeight();
        this.oBigImgX = this.oRightImg.outerWidth() - this.oRight.innerWidth();
        this.scale = this.oBigImgX / this.maxX;
    }

    init() {
        this.event();
    }

    event() {
        this.oLeft1.on('mouseover', () => {
            // 显示遮罩层和右边大图
            this.oCover.css('visibility', 'visible');
            this.oRight.css('visibility', 'visible');
            $$(document).on('mousemove', e => {
                let x = e.pageX - this.offsetX - this.r;
                let y = e.pageY - this.offsetY - this.r;
                if (x < 0) x = 0;
                if (y < 0) y = 0;
                if (x > this.maxX) x = this.maxX;
                if (y > this.maxY) y = this.maxY;
                this.oCover.css({ 'left': x, 'top': y });
                this.oRightImg.css({ 'left': -this.scale * x, 'top': -this.scale * y });
            })
        })
        this.oLeft1.on('mouseout', () => {
            this.oCover.css('visibility', 'hidden');
            this.oRight.css('visibility', 'hidden');
        })
    }
}

const fdj = new Magnifier('.magnifier');
fdj.init();